<template>
  <div class="pai">
    <div class="header">
      <div class="s">
        <van-icon @click="bock" name="arrow-left" />
        <span>排行榜</span>
        <span></span>
      </div>
    </div>
    <div class="main">
      <div class="sou">
        <van-icon name="search" />
        <input placeholder="请输入需要查询的经纪人" type="text" />
      </div>
      <div class="hr"></div>
      <div class="paim">
        <div class="nei">
          <div class="er" v-for="(item,ind) in state.er" :key="ind" @click="()=>{bin(item.msg)}">
            <img
              class="sdf"
              :src="item.img"
              alt=""
            />
            <p>{{item.name}}</p>
            <img class="yu" src="https://img2.baidu.com/it/u=1506906106,2251735102&fm=26&fmt=auto&gp=0.jpg" alt="">
          </div>
          <div class="yi" v-for="(item,ind) in state.yi" :key="ind" @click="()=>{bin(item.msg)}">
            <img
              class="sdf"
              :src="item.img"
              alt=""
            />
            <p>{{item.name}}</p>
            <img class="yu" src="https://img2.baidu.com/it/u=3575131204,336477064&fm=26&fmt=auto&gp=0.jpg" alt="">
          </div>
          <div class="san" v-for="(item,ind) in state.san" :key="ind" @click="()=>{bin(item.msg)}">
            <img
              class="sdf"
              :src="item.img"
              alt=""
            />
            <p>{{item.name}}</p>
            <img class="yu" src="https://img1.baidu.com/it/u=1064901036,2342599693&fm=26&fmt=auto&gp=0.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="lis">
       <div class="ll">
          <div class="li" v-for="(item,ind) in state.hou" :key="ind" @click="()=>{bin(item.msg)}">
          <div class="zuo" >
            <div class="mc">0{{item.msg}}</div>
            <img
              class="tou"
              :src="item.img"
              alt=""
            />
            <div class="nam">
              <div class="name">{{item.name}}</div>
              <div class="p">{{item.title}}</div>
            </div>
          </div>
          <div class="you">
            <div class="tb">
              <van-icon name="chat" />
            </div>
            <div class="tb">
              <van-icon name="phone" />
            </div>
          </div>
        </div>
       </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import axios from "../axios/index";
export default {
  name: "Pai",
  setup() {
    //路由
    const router = useRouter();
    const state = reactive({
      yi:[],//前三
      er:[],
      san:[],
      hou:[],
   
    });
    //返回
    const bock = () => {
      router.push("/index");
    };
    //详情
    
    const bin=(msg)=>{
      // console.log(msg)
      router.push("/xiangq/"+msg)
    }
    onMounted(async () => {
      const res = await axios.get("/paihangbang");
      // console.log(res)
      var users = res.result;
      
      // 1 把人員按照積分从高到底排列，冒泡排序
      function sortData(lists) {
        for (let n = 1; n < lists.length; n++) {
          for (let k = 0; k < lists.length - 1; k++) {
            let max = lists[k].yeji;
            let nextCount = lists[k + 1].yeji;
            if ( max < nextCount ) {
              // console.log(max)
              let preData = lists[k];
              lists[k] = lists[k + 1];
              lists[k + 1] = preData;
            }
          }
        }
        // console.log(lists); //此时lists就是按照积分高低排序之后的列表
        return lists
      }
      state.yi=sortData(users).slice(0,1)
      state.er=sortData(users).slice(1,2)
      state.san=sortData(users).slice(2,3)
      state.hou=sortData(users).slice(3,9)
    });
    // axios.get("/paihangbang").then(res=>{
    //   console.log(res)
    // })
    // console.log(state)
    return {
      bock,
      state,
      bin
    };
  },
};
</script>
<style scoped>
.lis {
  width: 100%;
  height: auto;
}
.name {
  font-weight: 500;
}
.yi,.er,.san{
  position: relative;
}

.yu{
  width: 40px;
  height: 40px;
}
.p {
  color: #ccc;
  font-size: 14px;
}
.li {
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
.tb{
  width: 40px;
  height: 40px;
  background: rgba(221, 82, 168, 0.315);
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
}
.tou {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.zuo,
.you {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zuo {
  width: 50%;
  padding: 0 5px;
}
.you {
  width: 30%;
  font-size: 25px;
  padding: 0 5px;
  color: rgb(247, 35, 134);
}
.nam{
  width:30%;
}
.pai {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url("https://img1.baidu.com/it/u=3457278526,403394454&fm=15&fmt=auto&gp=0.jpg");
}
.minp {
  width: 50px;
  height: 50px;
}
.nei {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.yi,
.er,
.san {
  background: #fff;
  border-radius: 10px 10px 0 0;
  text-align: center;
}
.er,
.san {
  width: 30%;
}
.yi {
  width: 39%;
}
.sdf {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.yi {
  height: 170px;
  margin-top: 30px;
}
.er,
.san {
  height: 120px;
  margin-top: 80px;
}
.header {
  width: 100%;
  height: 50px;
  background: rgb(46, 114, 241);
}
.s {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #fff;
  font-size: 18px;
}
.main {
  width: 100%;
  height: auto;
  flex: 1;
  overflow-y: scroll;
}
.sou {
  width: 90%;
  height: 40px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sou input {
  width: 95%;
  height: 40px;
  border: 0;
  background: rgba(230, 187, 187, 0.5);
}
.sou input::-webkit-input-placeholder {
  color: #fff;
}
.sou i {
  width: 5%;
  background: rgba(230, 187, 187, 0.5);
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #fff;
}
.paim {
  width: 100%;
  height: 200px;
}
.hr {
  width: 100%;
  height: 5px;
}
</style>
